/*
 * @Title: 首页
 * @Created by: ycq 
 */
<template>
	<view >
		<Banner />
		<!-- 首页搜索 -->
			<HeaderNavInput 
			:config="navConfig" 
			:focusHandle="focusHandle" 
			:goScan="goScan"
			 :rightTapHandle1="rightTapHandle1"
			/>
		<!-- 首页导航 -->
		<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
		<HomeNav style='margin-top: -100upx;'></HomeNav>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
		<HomeNav></HomeNav>
		<!-- #endif -->
		<view style="height: 300upx;"></view>
		<!-- 首页城市 -->
		<view class="place-item-max" @click="toCity">
			<img class='place-img' :src="cityData.img" alt="">
			<text class='place-name'>{{cityData.name}}</text>
			<text class='place-des'>详情 > </text>
			<view class="place-tip">
				<p class='dot'></p>
				<text>{{cityData.tip}}</text>
			</view>
		</view>
		<!-- 景区推荐 -->
		<view class="hot-list">
			<view class="list-title">
				<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
				<text class='shu'></text>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
				<text class='shu' style="margin-top: 16upx;"></text>
				<!-- #endif -->
				<text>景区推荐</text>
				<uni-icon type="arrowright" style='float: right;margin-top: 6upx;' size="22" color="#999999"></uni-icon>
				<text class="more" @click="toSpot()">更多 </text>
			</view>
			<scroll-view 
			class="scroll-view_H" 
			show-scrollbar='false' 
			@touchmove="gtouchmove($event,1)" 
			@touchstart="start"
			@touchend="touchEnd($event)"
			scroll-x="true" 
			scroll-left="0"
			 >
                <view class="place-item scroll-view-item_H"  v-for="(item,index) in hotData" :key='index' @click="toSpotDetail">
					<view class="item-area">
						<image class='place-img' :src="item.img" mode="aspectFill"></image>
						<text class='place-name-m'><font>{{item.firstWord}}</font>{{item.name}}</text>
						<text class='place-name des'>{{item.des}}</text>
						<text class='place-tj'>推荐</text>
						<view class="place-tip">
							<p class='dot'></p>
							<text>{{item.tip}}</text>
						</view>
					</view>
                </view> 
				<view class="place-item scroll-view-item_H" style="width: 80upx;margin-left: 0;" @click="toSpot()">
					<view class="item-area">
						<image class='place-img'  mode="aspectFill"></image>
						<image  class="list-more-img" src="/static/seemore.png" mode=""></image>
						<text class="list-more">查看更多</text>
					</view>
				</view> 
            </scroll-view>
			
		</view>
				
		<!-- 宾馆推荐 -->
		<view class="other-list">
			<view class="hot-list">
				<view class="list-title">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<text class='shu'></text>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<text class='shu' style="margin-top: 16upx;"></text>
					<!-- #endif -->
					<text>宾馆推荐</text>
					<uni-icon type="arrowright" style='float: right;margin-top: 6upx;' size="22" color="#999999"></uni-icon>
					<text class="more" @click="toHotel()">更多</text>
				</view>
				<scroll-view class="scroll-view_H"  
				show-scrollbar='false' 
				scroll-x="true" 
				@touchmove="gtouchmove($event,2)" 
				@touchstart="start"
				@touchend="touchEnd($event)"
				scroll-left="0" 
				>
					
				    <view class="place-item scroll-view-item_H" v-for="(item,index) in otherData" :key='index' @click="toHotelDetail()">
						<view class="item-area">
							<!-- <img class='place-img' :src="item.img" alt=""> -->
							<image  class='place-img' :src="item.img" mode="aspectFill"></image>
							<text class='place-name-m'><font>{{item.firstWord}}</font>{{item.name}}</text>
							<text class='place-tj'>推荐</text>
							<view class="place-tip">
								<p class='dot'></p>
								<text>{{item.tip}}
										<ul>
											<li v-for="index of item.level" :key="index"></li>
										</ul>
								</text>
							</view>
						</view>
				    </view>
					<view class="place-item scroll-view-item_H" style="width: 80upx;margin-left: 0;"  @click="toHotel">
						<view class="item-area">
							<image class='place-img'  mode="aspectFill"></image>
							<image  class="list-more-img" src="/static/seemore.png" mode=""></image>
							<text class="list-more">查看更多</text>
						</view>
					</view> 
				</scroll-view>
			</view>
		</view>
		<view class="other-list">
			<view class="hot-list">
				<view class="list-title">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<text class='shu'></text>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<text class='shu' style="margin-top: 16upx;"></text>
					<!-- #endif -->
					<text>美食推荐</text>
					<uni-icon type="arrowright" style='float: right;margin-top: 6upx;' size="22" color="#999999"></uni-icon>
					<text class="more" @click="toFood()">更多</text>
				</view>
				<scroll-view 
				class="scroll-view_H"  
				show-scrollbar='false'
				 @touchmove="gtouchmove($event,3)" 
				 @touchstart="start"
				 @touchend="touchEnd($event)"
				scroll-x="true" 
				scroll-left="0"  
				>
				    
					<view class="place-item  scroll-view-item_H" v-for="(item,index) in foodData" :key='index' @click="toFoodDetail()">
						<view class="item-area">
							<image  class='place-img' :src="item.img" mode="aspectFill"></image>
							<text class='place-name-m'><font>{{item.firstWord}}</font>{{item.name}}</text>
							<text class='place-tj'>推荐</text>
							<view class="place-tip">
								<p class='dot'></p>
								<text>{{item.tip}}</text>
							</view>
						</view>
				    </view>
					<view class="place-item scroll-view-item_H" style="width: 80upx;margin-left: 0;"  @click="toFood()">
						<view class="item-area">
							<image class='place-img'  mode="aspectFill"></image>
							<image  class="list-more-img" src="/static/seemore.png" mode=""></image>
							<text class="list-more">查看更多</text>
						</view>
					</view> 
				</scroll-view>
			</view>
		</view>
		<view class="other-list">
			<view class="hot-list">
				<view class="list-title">
					<text class='shu'></text>
					<text>娱乐推荐</text>
					<uni-icon type="arrowright" style='float: right;margin-top: 6upx;' size="22" color="#999999"></uni-icon>
					<text class="more" @click="toRecreation()">更多</text>
				</view>
				<scroll-view 
				class="scroll-view_H" 
				show-scrollbar='false' 
				@touchmove="gtouchmove($event,4)" 
				@touchstart="start"
				@touchend="touchEnd($event)"
				scroll-x="true" 
				scroll-left="0"  >
				    <view class="place-item  scroll-view-item_H" v-for="(item,index) in recreationData" @click="toDetail" :key='index'>
						<view class="item-area">
							<image  class='place-img' :src="item.img" mode="aspectFill"></image>
							<text class='place-name-m'><font>{{item.firstWord}}</font>{{item.name}}</text>
							<text class='place-tj'>推荐</text>
							<view class="place-tip">
								<p class='dot'></p>
								<text>{{item.tip}}</text>
							</view>
						</view>
				    </view>
					<view class="place-item scroll-view-item_H"  style="width: 80upx;margin-left: 0;" @click="toRecreation()">
						<view class="item-area">
							<image class='place-img'  mode="aspectFill"></image>
							<image  class="list-more-img" src="/static/seemore.png" mode=""></image>
							<text class="list-more">查看更多</text>
						</view>
					</view> 
				</scroll-view>
			</view>
		</view>
		<view class="list-bottom">
			<view class="line"></view>
			<text>我是有底线的</text>
			<view class="line"></view>
		</view>
		<!-- <view style="height: 19vw;">
		</view> -->
		<!-- <audio-player v-if='this.$store.state.showAudioPlayer.show'></audio-player> -->
	</view>
</template>

<script>
	import amap from '@/common/amap-wx.js';
	import Banner from '@/components/banner.vue'
	import HomeNav from '@/components/HomeNav.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		data() {
			return {
				navConfig: {
					left:{
						leftExist:true,
						ifleftGoback:false,
						leftGoback:'arrowleft',
						leftIcon:'/static/pos-home.png'
					},
					mid:{
						ifSearch:true,
						placeText:'请输入搜索内容',
						isdisabled:true,
						isShowScan:true,
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/weater.png',
						rightIcon2:'',
						rightIconName1:'多云',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true,//是否显示第一个图标
					},
					row:{
						isShowRightRow:false, //是否显示右侧图标文字横排
						rowText:'',//文字内容
						rowIco:'',//icon
						rowTextColor:'',//文字颜色
						rowIcoColor:''//icon颜色
						}
				},
				
				cityData:{
					name:'沈阳',
					img:'/static/linshi/sy-shenyang.jpg',
					tip:'沈阳—东北地区重要中心城市，素有“一朝发祥地、两代帝王城”之称'
				},
				hotData:[
					{
						firstWord:'沈',
						name:'阳故宫——大政殿',
						des:'全天候适宜 | 游览故宫',
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'沈阳 | 故宫'
					},
					{
						firstWord:'鞍',
						name:'山玉佛苑是国家首批4A级旅游景区',
						des:'适宜9-10月 | 全称5个景点',
						img:'/static/banner.png',
						tip:'玉佛苑 | 山水'
					},
					{
						firstWord:'鞍',
						name:'山玉佛苑是国家首批4A级旅游景区',
						des:'适宜9-10月 | 全称5个景点',
						img:'/static/banner.png',
						tip:'玉佛苑 | 山水'
					}
				],
				otherData:[
					{
						firstWord:'舒',
						name:'适的住宿环境，领略室外美景',
						img:'/static/banner.png',
						tip:'龙昂酒店 |  ',
						level:3
					},
					{
						firstWord:'舒',
						name:'适的住宿环境，领略室外美景',
						img:'/static/banner.png',
						tip:'龙昂酒店 |  ',
						level:5
					},
					{
						firstWord:'舒',
						name:'适的住宿环境，领略室外美景',
						img:'/static/banner.png',
						tip:'龙昂酒店 |  ',
						level:5
					}
				],
				foodData:[
					{
						firstWord:'中',
						name:'式烧烤，品尝美味',
						img:'/static/banner.png',
						tip:'信函小关烤肉',
					},
					{
						firstWord:'糖',
						name:'果奶茶店',
						img:'/static/banner.png',
						tip:'糖果奶茶店',
					},
					{
						firstWord:'糖',
						name:'果奶茶店',
						img:'/static/banner.png',
						tip:'糖果奶茶店',
					}
				],
				recreationData:[
					{
						firstWord:'聚',
						name:'会娱乐，共享欢乐',
						img:'/static/banner.png',
						tip:'万畅轰趴馆',
					},
					{
						firstWord:'讨',
						name:'论剧本，乐在其中',
						img:'/static/banner.png',
						tip:'剧本馆',
					},
					{
						firstWord:'讨',
						name:'论剧本，乐在其中',
						img:'/static/banner.png',
						tip:'剧本馆',
					},
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				startX:0,
				startY:0,
				canToUrl:true,
				blurHandle:false,
				amapPlugin: null,
				// key:'ccaa6ec2974c03e43fc7770ad3e3cc85', //个人申请的测试key
			}
			
		},
		components:{
			Banner,
			HomeNav,
			uniIcon
		},
		//监听页面滚动
		// onPageScroll(e){
		// 	console.log(e);
		methods: {
			// getScroll(data){
				
			// },
			rightTapHandle1(){
				uni.navigateTo({
					url:'/pages/common/wheater'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/home/Recreation/recreationDetail'
				})
			},
			//扫一扫
			goScan(){
				uni.navigateTo({
					url:'/pages/common/scan?from=3'
				})
				// uni.scanCode({
				// 	success:function(res){
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 	}
				// })
			},
			// 获取当前位置
			getRegeo(){
				let that = this;
				uni.getLocation({
				    type: 'wgs84',
					geocode: true,
				    success: function (res) {
						setTimeout(function() {
							that.localPosition = res.address.city;
							 console.log(that.localPosition);
							that.$store.commit('localPositionUpdata',res.address.city)
						}, 3000);
						 
				    },
					fail: function(err) {
						setTimeout(function() {
							console.log(err);
							that.$store.commit('localPositionUpdata','加载失败')
							uni.showToast({
								title:'获取失败，暂未开启GPS定位',
								icon:'none',
							})
						}, 3000);
					}
				});
			},
			
			// scroll-view拉到右侧触发
			goMore(e){
				console.log('到底了');
			},
			// 跳到搜索景点页面
			focusHandle(){
				uni.navigateTo({
					url:'/pages/home/shearchView',
					animationType:'slide-in-bottom',
				})
			},
			toCity(){
				uni.navigateTo({
					url:'cityDetail'
				})
			},
			toSpotDetail(){
				uni.navigateTo({
					url:'scenicSpot/spotDetail'
				})
			},
			toHotelDetail(){
				uni.navigateTo({
					url:'hotel/hotelDetail'
				})
			},
			toFoodDetail(){
				uni.navigateTo({
					url:'food/foodDetail'
				})
			},
			toSpot(){
				uni.navigateTo({
					url:'scenicSpot/scenicSpot'
				})
			},
			toHotel(){
				uni.navigateTo({
					url:'hotel/hotel'
				})
			},
			toFood(){
				uni.navigateTo({
					url:'food/food'
				})
			},
			toRecreation(){
				uni.navigateTo({
					url:'Recreation/recreation'
				})
			},
			start(e){		
				this.startX=e.changedTouches[0].clientX;
				this.startY=e.changedTouches[0].clientY;
			},
		
			gtouchmove(e,id){
				const subX=e.changedTouches[0].clientX-this.startX;
				const subY=e.changedTouches[0].clientY - this.startY;
				if(subX<-100&&subY<10&&subY>-10){
					if(this.canToUrl){
						this.canToUrl = false
						switch (id){
							case 1:
								uni.navigateTo({
									url:'scenicSpot/scenicSpot'
								})
								break;
							case 2:
								uni.navigateTo({
									url:'hotel/hotel'
								})
								break;
							case 3:
								uni.navigateTo({
									url:'food/food'
								})
								break;
							case 4:
								uni.navigateTo({
									url:'Recreation/recreation'
								})
								break;
							default:
								break;
						}
						
					}else{
						return
					}
						
				}
				
			},
			touchEnd(e){
				this.canToUrl=true
			}
		},
		onLoad(){
			this.getRegeo();
			
		},
	}

</script>

<style scoped>
	/* 首页搜索 */
	.home-search{
		width: 750upx;
		height: 60upx;
		position: fixed;
		top: 67upx;
		display: flex;
		z-index: 20;
		flex-direction: row;
	}
	.more{
		float: right;
		font-size: 30upx !important;
		font-weight: 100 !important;
		padding-top: 10upx;
		color: #888888;
	}
	.home-search-search{
		width: 544upx;
		height: 60upx;
		border: none;
		border-radius: 30px;
		font-size: 3vw;
		color: #999999;
		margin-left: 2%;
		background:url(/static/fdj-home.png) no-repeat white;
		background-position: 5%;
		background-size: 4vw;
		padding-left: 10%;
	}
	.home-search-pos{
		height: 4vw;
		margin: 2vw 3%;
	}
	.home-search-pos image{
		width: 22upx;
		height: 26upx;
		float: left;
	}
	.home-search-pos text{
		width: 50%;
		white-space: nowrap;  /*强制text不换行*/
		display: inline-block;  /*将text当做块级元素对待*/
		height: 4vw;
		text-align: center;
		float: left;
		padding-left: 1vw;
		line-height: 3.5vw;
		color: white;
		font-size: 3vw;
	}
	.home-search-weather{
		width:6.5%;
		height: 8vw;
		margin: -0.5vw 3% 0 3%;
	}
	.home-search-weather img{
		width: 49upx;
		height: 38upx;
	}
	.home-search-weather text{
		width: 100%;
		white-space: nowrap;  /*强制text不换行*/
		display:block; 
		color: white;
		text-align: center;
		margin-top: -1vw;
		font-size: 2vw;
	}
	
	.scroll-view_H{
		width: 750upx;
		height: 350upx;
		white-space: nowrap;
	}
	.list-more-img{
		width: 30upx;
		height:30upx;
		padding-top: 120upx;
		float: left;
		text-align: center;
		position: absolute;
	}
	.list-more{
		width: 80upx;
		height:200upx;
		padding-top: 40upx;
		display: block;
		float: left;
		font-size: 28upx;
		/* text-align: right; */
		-webkit-writing-mode: vertical-rl;
        -ms-writing-mode: bt-rl;
        writing-mode: vertical-rl;
        text-align: center;
		/* line-height: 300upx; */
		color: rgba(153,153,153,1.00);
	}
	.item-area{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.to-more{
		width: 600upx;
		margin-left: 30upx;
		margin-right: 30upx;
		height: 300upx;
		background: #3f4c5a;
		border-radius: 5px;
		margin-top: 5vw;
		display: inline-block;
	}
	.list-bottom{
		width: 100%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		margin-top: 20upx;
		justify-content: center;
	}
	.line{
		width: 100upx;
		height: 2upx;
		background: #999999;
		margin-top: 28upx;
	}
	.list-bottom text{
		color: #999999;
		font-size: 28upx;
		margin-left: 20upx;
		margin-right: 20upx;
		line-height: 60upx;
	}
	/* 景区模块 */
	.place-item{
		width: 600upx;
		margin-left: 30upx;
		margin-right: 30upx;
		height: 300upx;
		/* background: #3f4c5a; */
		border-radius: 5px;
		margin-top: 5vw;
		display: inline-block;
		position: relative;
	}
	.place-item-max{
		width: 700upx;
		margin-left: 30upx;
		margin-right: 30upx;
		height: 337upx;
		background: #3f4c5a;
		border-radius: 5px;
		margin-top: 5vw;
		position: relative;
	}
	.place-name{
		float: left;
		color: white;
		font-size: 4.5vw;
		left: 4.2%;
		position: absolute;
		padding-top: 3.86vw;
	}
	.place-name-m{
		float: left;
		color: white;
		font-size: 3.5vw;
		left: 4.2%;
		position: absolute;
		padding-top: 2vw;
	}
	.place-name-m font{
		font-size: 4vw;
	}
	.place-des{
		float: right;
		font-size: 3.5vw;
		right: 2.5%;
		color: white;
		position: absolute;
		padding-top: 4.53vw;
		
	}
	.place-tip{
		width: auto;
		position: absolute;
		bottom: 2vw;
		height: auto;
		left:2%;
		display: flex;
		flex-direction:row;
		margin-right: 2%;
		padding-right: 20px;
		border-radius: 15px 8px 15px 0;
		background: rgba(0,0,0,0.6);
	}
	.place-tip text{
		padding: 1vw 0px 1vw 10px;
		color: #FFFFFF;
		display:table;
		float: right;
		width: auto;
		line-height: 5vw;
		font-size: 3vw;
	}
	.place-tip ul{
		float: right;
		padding: 0;
		display: flex;
		flex-direction: row;
		list-style:none;
	}
	.place-tip ul li{
		width: 4vw;
		height: 5vw;
		margin-top: 0.2vw;
		background:url(/static/dengji.png) no-repeat center;
		background-size: 80%;
	}
	.dot{
		width: 1.08vw;
		min-width: 8px;
		height: 1.08vw;
		min-height: 8px;
		float: left;
		display: block;
		margin: auto 0px auto 14px;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.place-img{
		width: 100%;
		border-radius: 5px;
		height: 100%;
		position: absolute;
		left:0
	}
	/* 热门推荐 其他推荐 */
	.hot-list{
		width: 100%;
		height: auto;
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 8vw;
		margin-top: 3vh;
	}
	.list-title text{
		font-size: 34upx;
		/* font-weight: bolder; */
	}
	.shu{
		width: 5upx;
		height: 24upx;
		background: #55A0FF;
		float: left;
		margin-top: 22upx;
		margin-right: 10px;
	}
	.des{
		font-size: 2.5vw;
		top: 3.5vw;
	}
	.place-tj{
		float: right;
		font-size: 3vw;
		right: 5%;
		text-align: center;
		height: 8.6vw;
		color: white;
		border-radius: 0 0 50% 50%;
		width: 11.5%;
		position: absolute;
		line-height: 7vw;
		background: #55A0FF;
	}
</style>
